/**
 * 学生成绩管理系统 - JavaScript 功能实现
 * 这个文件包含登录和注册功能，以及用户身份验证
 */

// ==================== 第一部分：初始化用户数据 ====================

// // 检查是否是第一次运行系统（用户列表为空）
// // 如果是，就创建一个默认的管理员账户
// if (users.length === 0) {
//     users.push({
//         phone: 'admin',       // 管理员手机号
//         password: 'admin123', // 管理员密码
//         role: 'admin',        // 身份是管理员
//         name: '系统管理员'     // 显示名称
//     });
//
//     // 把用户数据保存回localStorage
//     localStorage.setItem('users', JSON.stringify(users));
// }

// ==================== 第二部分：登录功能 ====================

// 检查当前页面是否有登录表单(通过ID判断)
if (document.getElementById('loginForm')) {
    // 获取登录表单元素
    const loginForm = document.getElementById('loginForm');

    // 为表单添加提交事件监听器
    // 当用户点击登录按钮时会执行这个函数
    loginForm.addEventListener('submit', function(e) {
        // 阻止表单默认的提交行为(防止页面刷新)
        e.preventDefault();

        // 获取用户输入的值
        const username = document.getElementById('phone').value;     // 手机号
        const password = document.getElementById('password').value; // 密码
        // const userClass = document.getElementById('class').value;  // 班级(可选)

        // 在用户数组中查找匹配的用户
        // find()方法会遍历数组，返回第一个符合条件的用户
        // const user = users.find(u => u.phone === phone && u.password === password);


        // 向后端发送 POST 请求进行登录验证
        fetch("http://localhost:8080/user/login", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({ username, password })
        })
            .then(response => response.json())
            .then(data => {
                if (data.data.role === "admin") {
                    window.location.href = "manager_course.html"; // 跳转至 manager_course 页面
                } else if (data.data.role === "teacher") {
                    window.location.href = "teacher_class.html"; // 跳转至 teacher_class 页面
                } else if (data.data.role === "student") {
                    window.location.href = "student_course.html"; // 跳转至 student_course 页面
                }
                else {
                    alert("登录失败：无效的账号或密码");
                }
            })
            .catch(error => {
                console.error("登录请求出错:", error);
                alert("发生错误，请重试");
            });




        // // 如果找到了用户(user不为undefined)
        // if (user) {
        //     // 显示登录成功消息
        //     alert(`登录成功！欢迎${user.name || user.phone}`);
        //
        //     // 存储当前用户信息到localStorage，这样其他页面也能知道谁登录了
        //     localStorage.setItem('currentUser', JSON.stringify({
        //         phone: user.phone,   // 手机号
        //         name: user.name || user.phone, // 显示名称(如果没有设置名字就显示手机号)
        //         role: user.role,     // 身份(学生/老师/管理员)
        //         class: userClass || user.class || '' // 班级
        //     }));
        //
        //     // 根据用户身份跳转到不同页面
        //     switch(user.role) {
        //         case 'student':
        //             window.location.href = 'student.html'; // 跳转到学生页面
        //             break;
        //         case 'teacher':
        //             window.location.href = 'teacher.html'; // 跳转到老师页面
        //             break;
        //         case 'admin':
        //             window.location.href = 'admin.html';   // 跳转到管理员页面
        //             break;
        //         default:
        //             window.location.href = '#'; // 未知身份跳转到首页
        //     }
        // } else {
        //     // 如果没有找到用户，显示错误消息
        //     alert('手机号或密码错误！');
        // }


    });
}

// ==================== 第三部分：注册功能 ====================

if (document.getElementById('registerForm')) {
    const registerForm = document.getElementById('registerForm');
    const statusElement = document.getElementById('registerStatus');

    // 为每个输入字段创建错误提示元素
    const usernameError = document.createElement('div');
    usernameError.className = 'error-message';
    try {
        document.getElementById('username').after(usernameError);
    } catch (e) {
        console.error('无法添加用户名错误提示:', e);
    }

    const passwordError = document.createElement('div');
    passwordError.className = 'error-message';
    try {
        document.getElementById('regPassword').after(passwordError);
    } catch (e) {
        console.error('无法添加密码错误提示:', e);
    }

    const confirmError = document.createElement('div');
    confirmError.className = 'error-message';
    try {
        document.getElementById('confirmPassword').after(confirmError);
    } catch (e) {
        console.error('无法添加确认密码错误提示:', e);
    }

    registerForm.addEventListener('submit', function(e) {
        console.log('表单提交事件触发');
        e.preventDefault();

        // 重置所有错误提示
        usernameError.textContent = '';
        passwordError.textContent = '';
        confirmError.textContent = '';
        document.getElementById('username').classList.remove('error');
        document.getElementById('regPassword').classList.remove('error');
        document.getElementById('confirmPassword').classList.remove('error');
        statusElement.style.display = 'none';
        statusElement.className = 'status-message';

        // 获取输入值
        const username = document.getElementById('username').value.trim();
        const password = document.getElementById('regPassword').value.trim();
        const confirmPassword = document.getElementById('confirmPassword').value.trim();
        const role = document.getElementById('role').value;

        let isValid = true;

        // ===== 输入验证 =====

        // 1. 检查必填字段
        if (!username) {
            usernameError.textContent = '请输入用户名';
            document.getElementById('username').classList.add('error');
            isValid = false;
        }
        if (!password) {
            passwordError.textContent = '请输入密码';
            document.getElementById('regPassword').classList.add('error');
            isValid = false;
        }
        if (!confirmPassword) {
            confirmError.textContent = '请确认密码';
            document.getElementById('confirmPassword').classList.add('error');
            isValid = false;
        }
        if (!role) {
            showStatus('请选择身份', 'error');
            isValid = false;
        }
        if (!isValid) return;

        // 3. 检查密码复杂度
        //TODO 回来商讨一下，这玩意真的要留下来吗
        if (password.length < 8) {
            passwordError.textContent = '密码长度不能少于8位';
            isValid = false;
        } else if (!/[A-Z]/.test(password) || !/[a-z]/.test(password) || !/[0-9]/.test(password)) {
            passwordError.textContent = '密码需包含大小写字母和数字';
            isValid = false;
        }

        // 4. 检查两次密码是否一致
        if (password !== confirmPassword) {
            confirmError.textContent = '两次输入的密码不一致';
            document.getElementById('confirmPassword').classList.add('error');
            document.getElementById('regPassword').classList.add('error');
            isValid = false;
        }

        // 5. 检查手机号是否已注册
        if (users.some(u => u.phone === username)) {
            usernameError.textContent = '该手机号已注册';
            isValid = false;
        }

        if (!isValid) {
            showStatus('注册失败，请检查输入信息', 'error');
            resetForm();
            return;
        }

        // ===== 注册新用户 =====
        users.push({
            phone: username,
            password,
            role,
            name: username // 使用手机号作为默认名称
        });

        localStorage.setItem('users', JSON.stringify(users));
        showStatus('注册成功，三秒后自动跳转到登陆页面', 'success');

        setTimeout(() => {
            window.location.href = 'index.html';
        }, 3000);
    });

    // 显示状态消息的函数
    function showStatus(message, type) {
        console.log('显示状态消息:', message, type);
        statusElement.textContent = message;
        statusElement.className = 'status-message'; // 重置类
        statusElement.classList.add(`status-${type}`);
        statusElement.style.display = 'block';
        statusElement.style.opacity = '1'; // 确保完全可见

        // 3秒后开始淡出
        setTimeout(() => {
            statusElement.style.opacity = '0';

            // 淡出动画结束后隐藏元素
            statusElement.addEventListener('transitionend', function handler() {
                statusElement.style.display = 'none';
                statusElement.removeEventListener('transitionend', handler);
            }, { once: true });
        }, 3000);
    }

    // 重置表单函数
    function resetForm() {
        try {
            document.getElementById('username').value = '';
            document.getElementById('regPassword').value = '';
            document.getElementById('confirmPassword').value = '';
            document.getElementById('role').selectedIndex = 0;

            // 清除错误状态
            document.getElementById('username').classList.remove('error');
            document.getElementById('regPassword').classList.remove('error');
            document.getElementById('confirmPassword').classList.remove('error');
            usernameError.textContent = '';
            passwordError.textContent = '';
            confirmError.textContent = '';
        } catch (e) {
            console.error('重置表单时出错:', e);
        }
    }
}
// 添加以下代码块以实现登录逻辑


// document.addEventListener("DOMContentLoaded", function () {
//
//
// });


function login() {
    // event.preventDefault(); // 阻止表单默认提交行为

    const username = document.querySelector("input[name='username']").value; // 获取用户名输入框
    const password = document.querySelector("input[name='password']").value; // 获取密码输入框

    // 向后端发送 POST 请求进行登录验证
    fetch("/api/login", {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({ username, password })
    })
        .then(response => response.json())
        .then(data => {
            if (data.state === "manager") {
                window.location.href = "manager_course.html"; // 跳转至 manager_course 页面
            } else if (data.state === "teacher") {
                window.location.href = "teacher_class.html"; // 跳转至 teacher_class 页面
            } else {
                alert("登录失败：无效的账号或密码");
            }
        })
        .catch(error => {
            console.error("登录请求出错:", error);
            alert("发生错误，请重试");
        });



}


// ==================== 第四部分：页面保护逻辑 ====================
// 这部分代码实际上在各个身份页面(student.html, teacher.html, admin.html)中
// 但为了完整说明，这里也解释一下：

/*
// 在每个身份页面的<script>标签中会有这样的代码：

// 获取当前登录用户信息
const currentUser = JSON.parse(localStorage.getItem('currentUser'));

// 检查是否登录且身份正确
if (currentUser && currentUser.role === 'student') { // 学生页面检查
    // 显示用户信息
    document.getElementById('userName').textContent = currentUser.name;
} else {
    // 如果没有登录或身份不对，跳转到登录页
    location.href = 'index.html';
}

// 退出登录按钮功能
document.querySelector('.logout-btn').addEventListener('click', function() {
    localStorage.removeItem('currentUser'); // 删除登录信息
    location.href = 'index.html';           // 跳转到登录页
});
*/
